<template>
  <view>
    <uni-segmented-control styleType="text" :current="current" :values="items" @clickItem="onClickItem"
                           activeColor="#007aff"></uni-segmented-control>
    <uni-section v-if="current==0" title="报修信息" type="line">
      <view class="content">

          <uni-list>
            <uni-list-item title="报修单号" :rightText="repairData.repairCode"></uni-list-item>
            <uni-list-item title="报修人" :rightText="repairData.repairApplicantName"></uni-list-item>
            <uni-list-item title="报修人电话" :rightText="repairData.repairApplicantPhone"></uni-list-item>
            <uni-list-item title="设备名称" :rightText="repairData.deviceName"></uni-list-item>
            <uni-list-item title="设备类型" :rightText="repairData.deviceType"></uni-list-item>
            <uni-list-item title="学校" :rightText="repairData.school"></uni-list-item>
            <uni-list-item title="报修区域" :rightText="repairData.repairArea"></uni-list-item>
            <uni-list-item title="详细位置" :rightText="repairData.detailedLocation"></uni-list-item>
            <uni-list-item title="维修等级" :rightText="repairData.repairLevel"></uni-list-item>
            <uni-list-item title="故障类型" :rightText="repairData.faultType"></uni-list-item>
            <uni-list-item title="期望上门维修时间" :rightText="repairData.expectRepairTime"></uni-list-item>
            <uni-list-item title="故障描述" :rightText="repairData.remark"></uni-list-item>
          </uni-list>
        <view class="deContent">
          <file-upload :associate-form-id="repairData.eid" associate-form-name="repairOrder"
                       operate-type="view"></file-upload>
        </view>
      </view>
    </uni-section>

    <uni-section v-if="current==1" title="维修单跟踪" type="line">
      <view class="content">
<!--        <uni-steps :options="list2" active-color="#007AFF" :active="repairData.currentState" direction="column"/>-->
        <view style="margin-top: 30rpx">
          <uni-table  stripe emptyText="暂无更多数据" >
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="center" width="80">操作</uni-th>
<!--              <uni-th align="center" width="80">状态</uni-th>-->
<!--              <uni-th align="center" width="80">备注</uni-th>-->
              <uni-th align="center" width="84">时间</uni-th>
              <uni-th align="center" width="80">操作人</uni-th>
            </uni-tr>
            <uni-tr v-for="(record,index) in statusRecords" :key="index">
              <uni-th align="center" width="80">{{ record.operate }}</uni-th>
<!--              <uni-th align="center" width="80">{{ record.status }}</uni-th>-->
<!--              <uni-th align="center" width="80">{{ record.remark }}</uni-th>-->
              <uni-th align="center" width="130">{{ record.createDatetime }}</uni-th>
              <uni-th align="center" width="80">{{ record.creatorName }}</uni-th>
            </uni-tr>
          </uni-table>
        </view>
      </view>
    </uni-section>

    <uni-section v-if="current==2" title="服务评价" type="line">
      <view class="content">
        <uni-forms   ref="baseForm" :modelValue="evaluateData" label-width="100">
          <uni-forms-item label="服务评价等级" required>
            <uni-rate :disabled="true" disabledColor="#ffca3e" v-model="evaluateData.evaluateGrade"/>
          </uni-forms-item>
          <uni-forms-item label="评价内容" required>
            <uni-easyinput disableColor="#c7c7c7"  color="#2b2b2b" :disabled="true" type="textarea" v-model="evaluateData.evaluateContent"
                           placeholder="请输入评价内容"/>
          </uni-forms-item>
        </uni-forms>
        <o-empty v-if="this.repairData.currentState>=3"></o-empty>

      </view>
    </uni-section>
  </view>
</template>

<script>
import {RepairOrderService} from "../repairApplication/repairOrderService";
import FileUpload from "../../../components/FileUpload";
import {RepairEvaluateService} from "../Evaluate/repairEvaluateService";
import OEmpty from "../../../../uni_modules/o-empty/components/o-empty/o-empty";

export default {
  components: {OEmpty, FileUpload},
  data() {
    return {
      items: ['报修信息', '维修跟踪'],
      current: 0,
      repairData: {},
      active: 1,
      list2: [],
      evaluateData: {},
      showNoEvaluate:true,
      statusRecords:[],
    }
  },
  onLoad(options) {
    var data = options.id
    this.init(data);
  },
  created() {
  },
  methods: {
    init(id) {
      RepairOrderService.findRepairOrderForView(id).then(res => {
        this.repairData = res.data;
        let user = uni.getStorageSync('userInfo');
        let options = user.configs["维修单步骤"].options;
        let arr = options.split(",")
        let curArray = [];
        arr.forEach(item => {
          let temp = item.split(":")
          curArray.push({title: temp[0], desc: this.repairData[temp[1]] ? this.repairData[temp[1]] : "暂无数据"})
        })
        // console.log("cur",curArray)
        this.list2 = curArray;
        this.findEvaluate();
        this.findRecords();
      })
    },
    findRecords(){
      let queryParams = {
        currentPage: 1,
        pageSize: 100,
        filters: {
          repairOrderId: this.repairData.eid
        },
      }
      RepairOrderService.findRepairStatusRecords(queryParams).then(res => {
        this.statusRecords = res.data.datas
        console.log(this.statusRecords)
      })
    },
    findEvaluate() {
      let queryParams = {
        currentPage: 1,
        pageSize: 1,
        filters: {
          repairOrderId: this.repairData.eid
        },
      }
      RepairEvaluateService.findRepairEvaluates(queryParams).then(res => {
        if(res.data.datas.length!=0){
          this.items.push("评价")
        }
        this.evaluateData = res.data.datas[0]
      })
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
  }
}
</script>

<style>
.content {
  width: 88%;
  margin: auto;
}

.deLabel {
  font-weight: 600;
  margin: 15rpx;
}

.deContent {
  margin-top: 20rpx;
  /*color: #2b2b2b;*/
}

.uni-section {
  margin-bottom: 40rpx;
}
.uni-table-th {
  padding: 6px 6px!important;
  display: table-cell;
  box-sizing: border-box;
  font-size: 12px!important;
  /* font-weight: bold; */
  color: #999!important;
  border-bottom: 1px #ebeef5 solid;
}
</style>
